.navigation{
   position: fixed;
   top: 0;
   right: -534px;
   width: 534px;
   height: 100%;
   z-index: 100;
   background: #1b2636;
   .navigation_tit{
      padding-top: 50px;
      height: 128px;
      border-bottom: 2px solid #92979f;
      .nav_logo{
         margin: 0 auto;
         display: block;
         width: 280px;
         height: 61px;
      }
   }
   .navigation_list{
      .navigation_item{
         padding: 0 30px;
         height: 100px;
         line-height: 100px;
         font-size: 30px;
         color: #fff;
         border-bottom: 1px solid #92979f;

         .navigation_icon {
            margin-right: 24px;
            width: 40px;
            height: 40px;
            vertical-align: middle;
         }
         .navigation_arrow{
            margin-top: 40px;
            width: 18px;
            height: 18px;
         }
      }
   }
}

@keyframes moving {
   0% {
      right: 0;
   }
   100% {
      right: -534px;
   }
}
@keyframes show_moving {
   0% {
      right: -534px;
   }
   100% {
      right: 0;
   }
}

.show_navigation{
   animation: show_moving .4s linear;
   right: 0;
}
.moving{
   animation: moving .4s linear;
   right: -534px;
}
.show{
   visibility: hidden;
}